<!-- 骨架屏 -->
<!-- 
	page:'index',  界面
	default:true   状态
-->
<template>
	<view class="page">
		<!-- 首页骨架屏 -->
		<template v-if="skeInfo.page=='index'">
			<view class="ske-page">						
				<view class="module-wrap">
					<view class="row">
						<view class="ske-grid grow-3"></view>
					</view>				 				
					<view class="row ">
						<view class="ske-grid grow-1"></view>
						<view class="ske-grid grow-2"></view>
					</view>
					  <view class="row">
						<view class="ske-grid grow-3"></view>
					</view>
					
					<view class="row r-3">
						<view class="grow-4">
							<view class="ske-grid"></view>
							<view class="br"></view>
							<view class="ske-grid"></view>
						</view>
						<view class="grow-5">
							<view class="ske-grid"></view>
						</view>					
					</view>
					 
					
					<view class="row">
						<view class="ske-grid grow-3"></view>
					</view> 				 
				</view>
			</view>
		</template>
		
		<!-- 文章列表骨架屏 -->
		<template v-if="skeInfo.page=='article'">
			<view class="ske-page">	
				<veiw class="ske-article-list-item" v-for="(item,index) in 10" :key="index">
					<view class="pic"><view class="ske-grid"></view></view>
					<view class="info">
						<view class="ske-line"></view>
						<view class="ske-line" style="width: 70%;"></view>
						<view class="ske-line" style="width: 30%;"></view>
					</view>					
				</veiw>
				
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'loading',
		data() {
			return {
				skeInfo: this.ske
			}
		},
		props: {
			ske: {
				type: Object
			}
		},
		onReady() {
			console.log('ske', this.skeInfo)
		}
	}
</script>

<style lang="less" scoped> 
	.ske-page {
		height: 100%;
		overflow: hidden;
	}

	.ske-grid ,.ske-line{
		background: rgba(204, 204, 204, .4); 
		border-radius: 10rpx; 
		animation: 1.5s fade_in linear infinite normal; 
	}
	.ske-line{
		border-radius: 2rpx; 
	}

	@keyframes fade_in {
		0% {
			background: rgba(204, 204, 204, .4); 
		}
		100% {
			background: rgba(204, 204, 204, .6);
		}
	}
	
	.module-wrap{
		width: 96%;
		margin: 20rpx auto; 
		.row{ 
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
		}
		.ske-grid{
			flex-shrink: 0;
			height: 250rpx;
		}
	}
	.row{
		justify-content: space-between;
		.grow-1{ 
			width: 57%;
		}
		.grow-2{ 
			width: 41%;
		}
		.grow-3{
			width: 100%;
		}		
	}
	.r-3{
		align-items: stretch; 
		.grow-4{
			display: flex; 
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 50%; 
			height: 100%;
			.ske-grid{
				flex-grow: 2;
			}
			.br{
				height: 24rpx;
			}
		}
		.grow-5{
			width: 48%;
			.ske-grid{
				height: 520rpx;
			}
		}
	}
	
	.ske-article-list-item{
		display: flex;
		padding:20rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
		.pic{
			width: 30%; 
			margin-right: 20rpx;
			.ske-grid{
				height: 180rpx;
			}
		}
		.info{
			flex-grow: 2;
			.ske-line{
				height: 35rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	
</style>
